<template>
  <div class="buoy">
    <transition
      name="slide"
      enter-active-class="animated slideInUp"
      leave-active-class="animated slideOutDown"
    >
      <div
        class="cover"
        v-show="showContact"
      >
        <div class="iconfont wechat">&#xe7e5;</div>
        <div class="iconfont phone">&#xe686;</div>
      </div>
    </transition>
    <div
      class="iconfont plus"
      @click="handleCover"
    >
      &#xe604;
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommonBuoy',
  data () {
    return {
      showContact: false
    }
  },
  methods: {
    handleCover () {
      this.showContact = !this.showContact
    }
  }
}
</script>

<style lang="stylus" scoped>
  .buoy
    position fixed
    top 5.4rem
    right .015rem
    .iconfont
      font-size .36rem
    .cover
      color #FFD700
    .plus
      color #47B365
</style>
